import FormItem from "ant-design-vue/es/form/FormItem";
import { getValue, modalVal } from ".";
import FormUpload from "../form-upload";
import DatePicker, { RangePicker } from "ant-design-vue/es/date-picker";
import { TimePicker, TimeRangePicker } from "ant-design-vue/es/time-picker";
import { Checkbox, Input, Radio, Select } from "ant-design-vue/es/components";
import ProTable from "../pro-table";
import type { ProFormColType } from "../interface";
import { computed } from "vue";

export const renderFormItem = (
  item: ProFormColType<any>,
  modal: Record<string, any>
) => {
  const fieldValue = computed(() => modalVal(modal, item.dataIndex).get());
  const setFieldValue = modalVal(modal, item.dataIndex).set;
  const isType = (type: string) => {
    return !item.fieldRender && item.type === type;
  };

  if (isType("table")) {
    let arr = fieldValue.value || [];

    return (
      <FormItem
        {...item.formItemProps}
        key={item.dataIndex + "" || item.title}
        name={item.dataIndex}
        label={item.title + "::"} // 这里应该是在labelCol.span===24的时候组件自动删除了一个冒号出现的bug
        labelCol={{ span: 24 }}
        rules={item.rules || []}
      >
        <ProTable
          {...item.fieldProps}
          columns={item.fieldProps?.columns || []}
          pageSettings={{
            listKey: "result",
          }}
          request={() =>
            Promise.resolve({
              result: arr,
              total: 0,
              current: 1,
              pageSize: 10,
            })
          }
          mode="write"
          onSave={({ data, index, type }) => {
            if (type === "del") {
              arr.splice(index, 1);
            } else {
              arr[index] = data;
            }
            setFieldValue(arr);
          }}
        />
      </FormItem>
    );
  }

  return (
    <FormItem
      {...item.formItemProps}
      key={item.dataIndex + "" || item.title}
      name={item.dataIndex}
      label={item.title}
      rules={item.rules || []}
    >
      {item.fieldRender &&
        !item.type &&
        item.fieldRender({
          text: getValue(modal, item.dataIndex),
          record: modal,
          index: null,
          col: item,
        })}
      {(isType("input") || (!item.fieldRender && !item.type)) && (
        <Input
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          allowClear
          autocomplete="new-password"
        />
      )}
      {isType("select") && (
        <Select
          style={{ width: "100%" }}
          {...item.fieldProps}
          options={item.options || []}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          allowClear
        />
      )}
      {isType("radio") && (
        <Radio.Group
          {...item.fieldProps}
          options={item.options || []}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          allowClear
        />
      )}
      {isType("checkbox") && (
        <Checkbox.Group
          {...item.fieldProps}
          options={item.options || []}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          allowClear
        />
      )}
      {isType("time") && (
        <TimePicker
          style={{ width: "100%" }}
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          valueFormat={item.fieldProps?.valueFormat || "HH:mm:ss"}
          allowClear
        />
      )}
      {isType("timerange") && (
        <TimeRangePicker
          style={{ width: "100%" }}
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          valueFormat={item.fieldProps?.valueFormat || "HH:mm:ss"}
          allowClear
        />
      )}
      {isType("date") && (
        <DatePicker
          style={{ width: "100%" }}
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          valueFormat={
            item.fieldProps?.valueFormat ||
            {
              year: "YYYY",
              quarter: "YYYY-QQ",
              month: "YYYY-MM",
              week: "YYYY-wo",
            }[item.fieldProps?.picker] ||
            "YYYY-MM-DD"
          }
          allowClear
        />
      )}
      {isType("daterange") && (
        <RangePicker
          style={{ width: "100%" }}
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          valueFormat={
            item.fieldProps?.valueFormat ||
            {
              year: "YYYY",
              quarter: "YYYY-QQ",
              month: "YYYY-MM",
              week: "YYYY-wo",
            }[item.fieldProps?.picker] ||
            "YYYY-MM-DD"
          }
          allowClear
        />
      )}
      {isType("file") && (
        <FormUpload
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
        />
      )}
      {isType("image") && (
        <FormUpload
          {...item.fieldProps}
          value={fieldValue.value}
          onUpdate:value={setFieldValue}
          type="image"
        />
      )}
    </FormItem>
  );
};
